<template>
  <client-only>
    <div class="main">
      <div class="title">
        <a class="active" href="/login">登录</a>
        <span>·</span>
        <a href="/register">注册</a>
      </div>

      <div class="sign-up-container">
        <el-form :model="user" :rules="rules" ref="userForm">
          <el-form-item class="input-prepend restyle" prop="mobile">
            <div>
              <el-input
                type="text"
                placeholder="手机号"
                v-model="user.mobile"
              />
              <i class="iconfont icon-phone" />
            </div>
          </el-form-item>

          <el-form-item class="input-prepend" prop="password">
            <div>
              <el-input
                type="password"
                placeholder="密码"
                v-model="user.password"
              />
              <i class="iconfont icon-password" />
            </div>
          </el-form-item>

          <div class="btn">
            <input
              type="button"
              class="sign-in-button"
              value="登录"
              @click="submitForm"
            />
          </div>
        </el-form>
        <!-- 更多登录方式 -->
        <div class="more-sign">
          <h6>社交帐号登录</h6>
          <ul>
            <li>
              <a id="weixin" class="weixin" target="_blank" href="javascript:;"
                ><i class="iconfont icon-weixin"
              /></a>
            </li>
            <li>
              <a id="qq" class="qq" target="_blank" href="javascript:;"
                ><i class="iconfont icon-qq"
              /></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </client-only>
</template>
  
<script>
import "~/assets/css/sign.css";
import "~/assets/css/iconfont.css";
import memberApi from "../api/member";
import Cookies from "js-cookie";

export default {
  layout: "sign",
  data() {
    return {
      user: {
        mobile: "", //手机号
        password: "", //密码
      },
      rules: {
        // 表单验证规则
        mobile: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { validator: this.validateMoblie, trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 提交注册表单
    submitForm() {
      // 对表单内容进行校验
      this.$refs["userForm"].validate((valid) => {
        if (valid) {
          // 验证通过
          memberApi
            .login(this.user)
            .then((res) => {
              // 获取token信息，将token进行本地存储
              Cookies.set("member_token", res.data.token);
              // 获取当前用户信息

              // this.$message({
              //     type:'success',
              //     message:'注册成功'
              // })
            })
            .then(() => {
              memberApi.getInfo().then((res) => {
                console.log(res.data);
                let userInfo = JSON.stringify(res.data);
                Cookies.set("member_info", userInfo);
                // 跳转至登陆页面
                this.$router.push("/");
              });
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          // 格式校验失败
          console.log("err submit!!!");
          return false;
        }
      });
    },
    validateMoblie(rule, value, callback) {
      if (/^1[3456789]\d{9}$/.test(value)) {
        //验证通过
        callback();
      } else {
        callback(new Error("手机号码格式不正确"));
      }
    },
  },
};
</script>
<style>
.el-form-item__error {
  z-index: 9999999;
}
</style>